import React,{Component} from "react";
import "./form.scss"
const type = [
    {
        label: '线上活动',
        name: '线上活动',
        checked: false
    },
    {
        label: '推广类',
        name: '推广类',
        checked: false
    },
    {
        label: '线下活动',
        name: '线下活动',
        checked: false
    },
    {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
    }
]

class Form extends Component{
    state={
        activity:"",    //活动名称
        city:'北京',  //城市
        begin:'',       //开始时间
        over:'',       //结束时间
        phone:'',       //电话
        switch:false,      //开关
        job:'',         //职业
        sponsor:'1',     //赞助  淘宝
        describe:'',     //描述
    }

    // 活动名称
    handactivity=(e)=>{
        let activity=e.target.value
        this.setState({
            activity
        })
    }

    // 城市
    handlcity=(e)=>{
        let city=e.target.value
        this.setState({
            city
        })
    }

    // 开始时间
    handDataA=(e)=>{
        let dateA=e.target.value
        this.setState({
            begin:dateA
        })
    }

        // 结束时间
        handDataB=(e)=>{
            let dataB=e.target.value
            this.setState({
                over:dataB
            })
        }

        // 电话
        handphone=(e)=>{
            let phone=e.target.value
            this.setState({
                phone
            })
        }

        // 目前职业
        handjob=(e)=>{
            let job=e.target.value
            this.setState({
                job
            })
        }

        // 活动类型
        handtype=(e,index)=>{
            console.log(8520,e.target);
            if(e.target.type==='checkbox'){
                type[index].checked=!type[index].checked
            }
            let name=e.target.name
            let value=e.target.value
            this.setState({
                [name]:value
            })
        }

        // 赞助商
        handsponsor=(e)=>{
            let sponsor=e.target.value
            this.setState({
                sponsor
            })
        }

        // 描述
        handdescribe=(e)=>{
            let handdescribe=e.target.value
            this.setState({
                describe:handdescribe
            })
        }

        // 开关
        handswitch=(flag)=>{
            // console.log(flag);
            this.setState({
                switch: !flag
            })
        }

         // 提交表单信息
        // submitData = (e) => {
        //     e.preventDefault()
        //     console.log(this.state);
        //     this.setState({
        //         list:this.state.list,
        //     })
        //     console.log(8888,this.state.list);
        //     this.reset()
        // }
        
        // button 按钮提交信息
        submit=(e)=>{
            e.preventDefault()  //阻止form默认事件
            this.setState({
                list:this.state,
            })
            console.log(this.state);
         this.reset()
        }

        // 重置
        reset=()=>{
            this.setState({
                activity:"",    //活动名称
                city:'请选择城市',  //城市
                begin:'',       //开始时间
                over:'',       //结束时间
                phone:'',       //电话
                switch:false,      //开关
                job:'',         //职业
                sponsor:1,     //赞助  淘宝
                describe:'',     //描述
            })
        }



    render(){
        return(<>
        <form onSubmit={this.submitData}>
                <div className="bxo">
                    <div className="header">
                        <h2>form表单</h2>
                    </div>
                    <div className="list">
                        {/* 活动名称 */}
                        <div className="row">
                               <div className="left">
                            <label>活动名称</label>
                        </div>
                        <div className="right">
                            <input type="text" value={this.state.activity} onChange={this.handactivity} placeholder='请输入活动名称' className="text"/>
                        </div>
                        </div>
                        {/* 城市 */}
                        <div className="row">
                               <div className="left">
                            <label>城市</label>
                        </div>
                        <div className="right">
                           <select  value={this.state.city} onChange={this.handlcity}>
                           <option value="北京">请选择城市</option>
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="上海">上海</option>
                            <option value="哈尔滨">哈尔滨</option>

                           </select>
                        </div>
                        </div> 
                        {/* 日期 */}
                          <div className="row">
                               <div className="left">
                            <label>日期</label>
                        </div>
                        <div className="right">
                            <input className="rqA" type="date" value={this.state.dateA} onChange={this.handDataA} />
                            <input className="rqB" type="date" value={this.state.dataB} onChange={this.handDataB} />
                        </div>
                        </div>
                        {/* 报名电话 */}
                        <div className="row">
                               <div className="left">
                            <label>报名电话</label>
                        </div>
                        <div className="right">
                        <input type="text" value={this.state.phone} onChange={this.handphone} className="text"/>
                        </div>
                        </div> 
                        {/* 是否允许 */}
                        <div className="row">
                               <div className="left">
                            <label>允许电话沟通</label>
                        </div>
                        <div className="right">
                        <input className='switch-component' value={this.state.switch} onChange={(e) => this.handswitch(this.state.switch)} type='checkbox' />
                        </div>
                        </div> 
                        {/* 目前职业 */}
                        <div className="row">
                               <div className="left">
                            <label>目前职业</label>
                        </div>
                        <div className="right">
                        <input type="text" value={this.state.job} onChange={this.handjob} className="text"/>
                        </div>
                        </div> 
                        {/* 活动类型 */}
                        <div className="row">
                               <div className="left">
                            <label>活动类型</label>
                        </div>
                        <div className="right">
                            {
                                type.map((item,key)=>{
                                    return(
                                        <label key={key}>
                                        <input type="checkbox" checked={item.checked} name={item.name} onChange={(e)=>this.handtype(e,key)} className="chbox"/> 
                                        {item.name}
                                        </label>
                                    )
                                })
                            }
                        </div>
                        </div> 
                        {/* 赞助商 */}
                        <div className="row">
                               <div className="left">
                            <label>活动赞助商</label>
                        </div>
                        <div className="right">
                            <label>
                                <input type="radio" value='1' checked={this.state.sponsor==='1'} onChange={this.handsponsor} />
                                淘宝
                            </label>
                            <label>
                            <input type="radio" value='2' checked={this.state.sponsor==='2'} onChange={this.handsponsor} />
                                京东
                            </label>
                        </div>
                        </div> 
                        {/* 描述 */}
                        <div className="row">
                               <div className="left">
                            <label>描述</label>
                        </div>
                        <div className="right">
                        <textarea value={this.state.describe} onChange={this.handdescribe} cols="40" rows="5"></textarea>
                        </div>
                        </div> 
                        <div className="btn">
                        <button onClick={this.submit}>提交</button>
                        <button onClick={this.reset}>重置</button>
                        </div>
                     
                    </div>
                </div>
        </form>
        </>
        )
    }
}


export default Form